<template>
	<view>
		<view>
			<table-title content="物品借用服务申请"></table-title>
			<view>
				<small-title content="基本资料"></small-title>
				<view class="item-table">
					<view-item name="申请人" :value="userMsg.userName"></view-item>
					<view-item name="手机号码" :value="userMsg.userPhone"></view-item>
					<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
					<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
					<view-item name="单元号" :value="userMsg.room"></view-item>
					<input-item typeMsg="物品名称" @getValue="setItemName"></input-item>
					<input-item typeMsg="数量" @getValue="setItemAmount"></input-item>
					<view class="picker-bar-service">
						<view class="picker-bar-name">归还时间</view>
						<view style="border-bottom: solid 1rpx #C8C7CC ;">
							<picker mode="date" :value="returnTime" start="2020-01-01" end="2022-03-03"
								@change="chooseReturnTime">
								<view class="picker-content-service">{{ returnTime }}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex;align-items: center;">
				<small-title content="费用(押金)"></small-title>
				<view class="cost-style">{{previousCost}}</view>
			</view>
			<view>
				<small-title content="支付"></small-title>
				<view style="display: flex;justify-content: center;">
					<radio-group class="payway-style">
						<label style="display: flex;">
							<radio class="first-radio" color="#FF0000" value="alipay"></radio>
							<view class="payway-choice">
								<image src="@/static/alipay-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">支付宝支付</view>
							</view>
						</label>
						<label style="display: flex;">
							<radio class="second-radio" color="#FF0000" value="wechat"></radio>
							<view class="payway-choice">
								<image src="@/static/wechat-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">微信支付</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<button class="submit-button" @click="submit">提交</button>
			<view style="height: 200rpx;"></view>
		</view>
		<u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				returnTime:'2020-02-02',
				userMsg:{
					'userName':'李阳','userPhone':'13565137716','userCompany':'福建海峡科技有限公司',
					'userBuilding':'福建八闽大厦','room':'1501'},
				previousCost: '520元',
				wechatChecked: false,
				alipayChecked: false,
				itemMsg:{'name':'','amount':'','returnTime':''},
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0
			}
		},
		methods: {
			chooseReturnTime(e) {
				this.returnTime = e.target.value
				this.itemMsg.returnTime = e.target.value
			},
			setItemName(e){
				this.itemMsg.name = e
			},
			setItemAmount(e){
				this.itemMsg.amount = e
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			},
			submit() {
				uni.navigateTo({
					url:'../history/history'
				})
			}
		},
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.payway-style{
		display: flex;
		flex-direction: column;
		width: 650rpx;
	}
	.first-radio{
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color:#FFFFFF;
		padding-left: 25rpx;
		border: solid 1rpx #C8C7CC;
		border-bottom: none;
		border-right: none;
	}
	.second-radio{
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color:#FFFFFF;
		padding-left: 25rpx;
		border: solid 1rpx #C8C7CC;
		border-right: none;
		width: 50rpx;
	}
	.payway-logo{
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
	.payway-choice{
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 1rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.invoice-group{
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	.invoice-choice{
		display: flex;
		margin-left: 50rpx;
	}
	.submit-button{
		background-color: #007AFF;
		color: #FFFFFF;
		width: 650rpx;
		margin-top: 50rpx;
		border-radius: 50rpx;
	}
	.cost-style{
		display: flex;
		align-items: center;
		color: #555555;
		margin-left: 20rpx;
	}
	.picker-bar-service{
		width: 652rpx;
		background-color: #FFFFFF;
		height: 100rpx;
		display: flex;
		border: solid 1rpx #C0C0C0;
	}
	.picker-content-service{
		background-color: #FFFFFF;
		width: 400rpx;
		height: 98rpx;
		display: flex;
		align-items: center;
		padding-left: 50rpx;
		border-bottom: solid 1rpx #C8C7CC;
		
	}
	.picker-bar-name{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
	}
</style>
